<template>
  <div class="login-account">
    <crv-form v-bind="loginConfig" v-model="formData" ref="crvFormRef">
      <template #header>
        <div class="header">Pc Web Demo</div>
      </template>

      <template #name_prepend="scope">{{ scope.row.placeholder }}</template>
      <template #password_prepend="scope">{{ scope.row.placeholder }}</template>

      <template #footer>
        <div>
          <el-button type="primary" class="login-btn" @click="loginAction"
            >登录</el-button
          >
          <div class="footer-dec">2022 Web-PC前端 版本 v1.0.0</div>
        </div>
      </template>
    </crv-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { useStore } from 'vuex'
import CrvForm, { IForm } from '@/base-ui/form'

export default defineComponent({
  props: {
    loginConfig: {
      type: Object as PropType<IForm>,
      required: true
    }
  },
  components: {
    CrvForm
  },
  setup(props) {
    //1:初始化crvForm
    let crvFormRef = ref<InstanceType<typeof CrvForm>>()

    //2:绑定数据
    const formData = ref<any>({})
    props.loginConfig.formItems.forEach((item) => {
      formData.value[item.field] = ''

      if (item.field === 'name') {
        formData.value[item.field] = 'kobe'
      }

      if (item.field === 'password') {
        formData.value[item.field] = '123456'
      }
    })

    //3:登录
    let store = useStore()
    const loginAction = () => {
      crvFormRef.value?.ruleFormRef?.validate((valid: boolean) => {
        if (valid) {
          store.dispatch('login/accoutLoginAction', { ...formData.value })
        } else {
          console.log('验证失败')
        }
      })
    }
    return { loginAction, formData, crvFormRef }
  }
})
</script>

<style lang="less" scoped>
.login-account {
  width: 350px;
  background-color: white;
  padding: 10px;
  border-radius: 2px;
  text-align: center;
  z-index: 100;
  .header {
    height: 60px;
    line-height: 60px;
    margin-bottom: 10px;
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
  }
  .login-btn {
    width: calc(100% - 15px);
  }
  .footer-dec {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
  }
}
</style>
